<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div style="height: 50px;"></div>
    <div class="about-us" v-show="show">
      <p class="order mar_bo">
        <span class="order_sp1">
            应付：
        </span>
            <span class="order_sp2">
            ¥{{money}}
        </span>
      </p>
      <div class="order_ki">
        <!--<p class="order border_b">-->
    <!--<span class="order_sp1">-->
        <!--支付方式-->
    <!--</span>-->
        <!--</p>-->
        <!--<ul class="order_ul">-->
          <!--<li>-->
            <!--<div class="cancel_span1 fl_right">-->
              <!--<input type="radio" name="cause">-->
            <!--</div>-->
            <!--<p class="order">-->
                <!--<span class="order_sp3">-->
                    <!--<img src="../assets/image/fuxq_icon_07.png" alt="">-->
                <!--</span>-->
              <!--<span class="order_sp4">-->
                    <!--微信支付-->
                <!--</span>-->
            <!--</p>-->
          <!--</li>-->
        <!--</ul>-->
      </div>
      <div class="btn_b">
        <div class="btn_yellow" @click="pay">
          立即支付
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'PayOrder',
    data () {
      return {
        show: true,
        money: '',
        order: '',
        id: '',
        pay_type: '微信',
        from: '',
        ajaxUrl: 'Pay/jsapiPayOrder'
      }
    },
    methods: {
      pay: function () {
        let thisObj = this
        thisObj.$vux.loading.show({
          text: '加载中'
        })
        thisObj.$chaos.ajax({
          data: {
            order_no: thisObj.order,
            openid: thisObj.$chaos.getOpenId()
          },
          slient: true,
          userinfo: false,
          url: thisObj.ajaxUrl,
          callback: function (type, res) {
            thisObj.$vux.loading.hide()
            if (res.status === 'SUCCESS') {
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                  'appId': res.result.wxpay_data.appid,
                  'timeStamp': '' + res.result.wxpay_data.timestamp,
                  'nonceStr': res.result.wxpay_data.noncestr,
                  'package': 'prepay_id=' + res.result.wxpay_data.prepayid,
                  'signType': 'MD5',
                  'paySign': res.result.wxpay_data.sign
                },
                function (res) {
                  if (res.err_msg === 'get_brand_wcpay_request:ok') {
                    thisObj.$vux.toast.show({
                      text: '恭喜您下单成功',
                      type: 'text',
                      width: '180px',
                      position: 'bottom'
                    })
                    setTimeout(function () {
                      window.history.back(-1)
                    }, 600)
                  }
                }
              )
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        this.$chaos.setTitle('订单确认')
        this.$store.commit('headerShow', true)
        this.$store.commit('title', '订单确认')
        this.$store.commit('footerShow', false)
        this.id = this.$chaos.getQueryString('id')
        this.order = this.$chaos.getQueryString('order')
        this.money = this.$chaos.getQueryString('money')
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  .btn_b{
    width:100%;
    background-color: #fff;
    height:48px;
    position: fixed;
    bottom: 0px;
  }
  body,
  html {
    background: #f9f9f9;
  }
  .mar_bo {
    margin-bottom: 4px;
  }
  .order_sp1 {
    display: block;
    float: left;
  }
  .order_sp2 {
    color: #ff0d0d;
    margin-left: 10px;
  }
  .order_ki {
    overflow: hidden;
  }
  .border_b {
    border-bottom: 1px solid #f9f9f9;
  }
  .order {
    background: #fff;
    padding: 11px 15px;
    overflow: hidden;
  }
  .order_sp1 {
    display: block;
    float: left;
  }
  .order_ul {
    background: #fff;
    overflow: hidden;
  }
  .order_ul li {
    overflow: hidden;
    border-bottom: 1px solid #f9f9f9;
  }
  .fl_right {
    float: right;
    margin-top: 13px!important;
  }
  .cancel_span1 {
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    margin: 2px 0px 0px 15px;
  }
  .order {
    background: #fff;
    padding: 11px 15px;
    overflow: hidden;
  }
  .order_sp3 {
    width: 24px;
    height: 22px;
    display: block;
    float: left;
  }
  .order_sp3 img {
    width: 100%;
    height: 100%;
  }
  .order_sp4 {
    margin-left: 8px;
  }
  .btn_yellow {
    width: 90%;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background: #ffa128;
    border-radius: 5px 5px;
    position: fixed;
    bottom: 6px;
    left: 50%;
    margin-left: -45%;
    color: #fff;
    font-size: 14px;
  }
  .cancel_span1 input[type="radio"],.cancel_span2 input[type="checkbox"]{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #aeaeae;
  }
  .cancel_span1 input[type="radio"]:checked{
    background: url("../assets/image/btn_xz_s.png");
    background-size: 100% 100%;
    width:17px;
    height:17px;
    border:0px;
  }
</style>
